<template>
	<view class="main">
		<u-navbar back-text="" slot="center" :autoBack="true" safeAreaInsetTop placeholder>
			<view slot="center" class="leftText">添加项目经验</view>
		</u-navbar>
		
		<u--form
			labelPosition="left"
			:model="model1"
			labelStyle="color:#424242"
			ref="form1">
			<view class="forms">
			<u-form-item label="工作单位" fontSize="12" readonly labelWidth="100" prop="userInfo.range" borderBottom>
				<u--input
					v-model="formData.enterpriseName" 
					fontSize="14" 
					disabledColor="#0F0F0F" 
					inputAlign="right"
					maxlength="20"
					border="none" 
					placeholder="请输入工作单位名称"></u--input>
			</u-form-item>
			<u-form-item label="岗位名称"labelWidth="100" prop="userInfo.range" borderBottom>
				<u--input 
					v-model="formData.skill" 
					fontSize="14" 
					disabledColor="#0F0F0F" 
					inputAlign="right"  
					border="none" 
					placeholder="请输入岗位名称"></u--input>
			</u-form-item>
			<u-form-item label="开始工作时间" labelWidth="100" @click="dateChange(1)" :label-style="{'font-size':'28rpx;'}"  borderBottom>
				<u--input v-model="formData.startTime" inputAlign="right" border="none" disabledColor="none" disabled></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="结束工作时间" labelWidth="100" @click="dateChange(2)" :label-style="{'font-size':'28rpx;'}"  borderBottom>
				<u--input v-model="formData.endTime" inputAlign="right" border="none" disabledColor="none" disabled></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			</view>
			<view class="form">
				<u--textarea v-model="formData.remark" height="180" maxlength="400"
			placeholder="例如：2018年到2020年在万达项目中，做木工，铝膜，资料现场都可以" 
			count border="none"></u--textarea>
			</view>
		</u--form>
			
		<!--全部工种-->
		<pop ref="gongzhong" :direction="direction" :is_close="true" :is_mask="true" :width="100">
			<view class="">
				<view class="cityName">全部工种</view>
				 <view class="checkgongzhongLList row-box" v-if="selectCheckgognzhong.length>0">
					 <view v-for="(se,sc) in selectCheckgognzhong" :key="sc" class="dis-row" @click="delSelectgz(se,sc)">
						 <text>{{se.skillName}}</text>
						 <label><image src="http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/icon/cc.png"></image></label>
					 </view>
				 </view>
				 <view class="cityList dis-row">
				 	<view class="sheng dis-clm">
				 		<scroll-view scroll-y="true">
				 			<view class="sheng-Lst" v-for="(gzitem,gzindex) in gongzhongList" 
								:key="gzindex" 
								:class="{'shengActive':(gzlevelone==gzindex)}"
								@click="gzTaskLevelone(gzitem,gzindex)">
								{{cutstr(gzitem.skillName,10)}}
							</view>
				 		</scroll-view>
				 	</view>
				 	<view class="leveltwo dis-clm" v-if="gongzhongList[gzlevelone] && gongzhongList[gzlevelone].child">
						<scroll-view scroll-y="true">
							<view class="shi-lst" v-for="(shiItem,shiIndex) in gongzhongList[gzlevelone].child" 
							:key="shiIndex"
							:class="{'shiActive':(gzleveltwo === shiIndex)}"
							@click="gzTaskLevelTwo(shiItem,shiIndex)"
							style="width: 400rpx;"
							>
								{{shiItem.skillName}}
							</view>
						</scroll-view>
					</view>
				 </view>
				 
				 <view class="addres-footer dis-row">
					 <view class="addres-btn" @click="cleanGongZhongIndex()">清除</view>
					 <view class="addres-btn" @click="getCheckGongZhong()">确定选择</view>
				 </view>
			 </view>
		</pop>
		<view class="submit"><u-button type="primary" @click="sendPost()" text="确定"></u-button></view>
		<u-datetime-picker
			:show="dateShow"
			v-model="dateVal"
			:minDate='0'
			:maxDate="maxDate"
			mode="date"
			@confirm="dateConfirm"
			@cancel="dateCancel"
			:formatter="formatter"
			></u-datetime-picker>
		
	</view>
</template>

<script>
import Index from '@/common/index-model.js'
import pop from "@/components/ming-pop/ming-map.vue"
import fun from "@/common/publicFun.js"
let index=new Index();
let that = null;
export default {
	data() {
		return {
			notice:'',
			id:'',
			myCard:{},
			selectCheckgognzhong:[],
			gongzhongList:{},
			gzlevelone:0,
			gzleveltwo:'',
			direction:'below',
			formData:{
				enterpriseName:'',
				skill:'',
				skillsId:'',
				remark:'',
				startTime:'',
				endTime:'',
			},
			changeVal:1,
			dateShow:false,
			dateVal:'2023-02-01',
			maxDate:'',
		}
	},
	onLoad(opt) {
		this.id=opt.id;
		this.getCardDetail(opt.id);
		this.getQueryType();
		let date=new Date();
		this.maxDate=date.getTime();
		this.dateVal=fun.formatDate(this.maxDate,"yyyy-MM-dd");
	},
	onShow() {
		
	},
	components: {
		pop
	},
	methods:{
		//时间选择
		dateChange(val){
			this.changeVal=val;
			if(val==1){
				this.dateVal=this.formData.startTime;
			}else{
				this.dateVal=this.formData.endTime;
			}
			this.dateShow=true;
		},
		dateConfirm(e){
			if(this.changeVal==1){
				this.formData.startTime=fun.timestampToTime(e.value,'-');
			}else{
				this.formData.endTime=fun.timestampToTime(e.value,'-');
			}
			this.dateShow=false;
		},
		dateCancel(e){
			this.dateShow=false;
		},
		//跳转到选择工种页面
		checkNavGongZhong() {
			this.$refs.gongzhong.show();
			return false;
		 },
		//查询工种
		getQueryType() {
			let types= "construction"
			this.Qurylist = []
			index.getPublicMember({},'client/skills/list/'+types,'get',res=>{
				if(res.data.success && res.data.code == 200){
							
					let arr = res.data.result
					let gzarr=[];
					if(arr.length>0){
						for(let i=0;i<arr.length;i++){
							if(arr[i].slevel == 2){
								this.Qurylist.push({name:arr[i].skillName,id:arr[i].id})
								gzarr.push(arr[i]);
							}
						}
						//console.log(gzarr,'=====gzarr====gzarr')
						//把三级工种压到二级工种里面
						if(gzarr.length>0){
							for(let j=0;j<gzarr.length;j++){
								gzarr[j].child = []
								for(let m=0;m<arr.length;m++){
									if(arr[m].pid == gzarr[j].id && arr[m].slevel == 3){
										gzarr[j].child.push(arr[m])
									}
								}
							}
						}
						this.gongzhongList = gzarr;
					}else{
						this.gongzhongList=[]
					}
				}else{
					this.Qurylist = []
					this.gongzhongList = []
				}
			})
		},
		//点击工种二级类型 切换下标
		gzTaskLevelone(item,gzindex) {
			this.gzlevelone = gzindex;
			this.gzleveltwo = '';
		},
		//切换三级工种 类型 下标
		gzTaskLevelTwo(item,gzindex) {
			this.isclickgztwo = true;
			if(this.selectCheckgognzhong.length >= 1){
				index.show_tips('所选工种不能超过1个')
				return false
			}else{
				this.selectCheckgognzhong.push(item);
				this.gzleveltwo=gzindex;
			}
		},
		//移除选中的工种
		delSelectgz(se,sc) {
			if(this.selectCheckgognzhong.length>0){
				this.selectCheckgognzhong.splice(sc,1)
				//delete this.selectCheckgognzhong[sc]
			}
		},
		//清空选中的工种
		cleanGongZhongIndex() {
			this.gzlevelone = 0
			this.gzleveltwo = 0
			this.selectCheckgognzhong = []
					this.form.objType = ''
			//this.$refs.gongzhong.close()
		},
		//确定选中的工种进行查询
		getCheckGongZhong() {
			if(this.selectCheckgognzhong.length == 0){
				index.show_tips('请先去选择要查询的工种')
				return false
			}
			let skillsId='',skillsName='';
			this.selectCheckgognzhong.forEach((item,index)=>{
				skillsId+=item.id+',';
				skillsName+=item.skillName+',';
			})
			this.formData.skillsId=skillsId;
			this.formData.skill= index.strTrim(skillsName,',');
			this.$refs.gongzhong.close();
		},
		cutstr(str, len) {
			var str_length = 0;
			var str_len = 0;
			var str_cut = new String();
			str_len = str.length;
			for (var i = 0; i < str_len; i++) {
				var a = str.charAt(i);
				str_length++;
				if (escape(a).length > 4) {
					//中文字符的长度经编码之后大于4  
					str_length++;
				}
				str_cut = str_cut.concat(a);
				if (str_length >= len) {
					str_cut = str_cut.concat("...");
					return str_cut;
				}
			}
			//如果给定字符串小于指定长度，则返回源字符串；  
			if (str_length < len) {
				return str;
			}
		},
		getCardDetail(id){
			index.getPublicUserMember({},'/client/card/detail','get',res=>{
				if(res.data.code == 200 && res.data.success){
					let data=res.data.result.productHistoryList;
					const history = data.filter(
					    (item) => item.id == id
					);
					console.log(history);
					this.formData.enterpriseName=history[0].enterpriseName;
					this.formData.skill=history[0].skill;
					this.formData.skillsId=history[0].skillsId;
					this.formData.remark=history[0].remark;
					this.formData.startTime=history[0].startTime;
					this.formData.endTime=history[0].endTime;
				}
			})
		},
		sendPost(){
			if(!this.formData.enterpriseName){
				index.show_tips('请输入工作单位名称')
				return
			}
			if(!this.formData.skill){
				index.show_tips('请选择工作工种')
				return
			}
			if(!this.formData.startTime){
				index.show_tips('请选择您参加工作开始时间')
				return
			}
			if(!this.formData.endTime){
				index.show_tips('请选择您参加工作结束时间')
				return
			}
			if(this.formData.startTime>this.formData.endTime){
				index.show_tips('结束时间不能早于开始时间')
				return
			}
			if(!this.formData.remark){
				index.show_tips('请输入您的工作描述')
				return
			}
			if(this.id){
				this.formData.id=this.id;
				index.getPublicUserMember(this.formData,'/client/card/modifyProductHis','post',res=>{
					console.log(res);
					if(res.data.code == 200 && res.data.success){
						index.show_tips('操作成功')
						setTimeout(()=>{
							index.navigate_back()
						},2000)
					}else{
						index.show_tips(res.data.message);
						return false
					}
				})
			}else{
				index.getPublicUserMember(this.formData,'/client/card/addProductHis','post',res=>{
					if(res.data.code == 200 && res.data.success){
						index.show_tips('操作成功')
						setTimeout(()=>{
							index.navigate_back(1)
						},2000)
					}else{
						index.show_tips(res.data.message);
						return false
					}
				})
			}
		},
	}
}	
</script>

<style>
@import url("@/static/css/publics.css");
@import url("./findJob.css");
page{
	background: #F3F3F3;
}
.forms{ padding: 20rpx; background: #fff; margin-bottom: 20rpx;}
.form{ padding: 20rpx; background: #fff; margin-bottom: 80rpx;}
.submit{ padding: 20rpx;}
/deep/.input-placeholder{ color: #f00;}


</style>